<template>
  <div>
    <div class="cost-title">{{title}}<span> (单位：元)</span></div>
    <el-table border
              :data="tableData">
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index"
                         :show-overflow-tooltip="true"
                         :width="column.name === 'remarks' ? '' : '220px'"
                         v-bind="column">
          <template slot-scope="scope">
            <div :class="[column.type === 'total' ? 'c-primary f14' : 'tooltipSty']">
              {{ scope.row[column.name] 
              ? (column.type === 'total' ? thousandDigit(scope.row[column.name], 2) : scope.row[column.name]) 
              : (column.type === 'total' ? 0 : '--') }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "SurchargeFee",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '补充费用明细'
    }
  },
  data () {
    return {
      tableData: []
    };
  },
  computed: {
    tableColumn () {
      return [
        {
          label: "费用项",
          name: "typeName",
          type: "text"
        },
        {
          label: "备注信息",
          name: "remarks",
          type: "text"
        },
        {
          label: "补充费用",
          name: "money",
          type: "total"
        }
      ];
    }
  },
  watch: {
    dataList: {
      handler (val) {
        this.tableData = JSON.parse(JSON.stringify(val));
      },
      deep: true,
      immediate: true
    }
  },
  // created () {
  // this.$watch('dataList', (newVal, oldVal) => {
  //   this.tableData = JSON.parse(JSON.stringify(newVal));
  // }, {
  //   deep: true,
  //   immediate: true
  // })
  // },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-title {
  margin: 20px 0 15px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.tooltipSty {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
</style>
